<template>
  <div class="fuyunmu base-background-img">
    <div class="left">
      <img @click="toggleTabs('dec')" src="~@/assets/youxiaoxianjie/home/left.png">
    </div>
    <div class="right">
      <img @click="toggleTabs('add')" src="~@/assets/youxiaoxianjie/home/right.png">
    </div>
    <component :is="currentView" keep-alive></component>
  </div>
</template>

<script>
  import fuyunmu1 from './fuyunmu/fuyunmu1'
  import fuyunmu2 from './fuyunmu/fuyunmu2'
  import fuyunmu3 from './fuyunmu/fuyunmu3'
  import fuyunmu4 from './fuyunmu/fuyunmu4'
  import fuyunmu5 from './fuyunmu/fuyunmu5'
  import fuyunmu6 from './fuyunmu/fuyunmu6'
  export default {
    name: 'fuyunmu',
    data () {
      return {
        currentIndex: 1,
        currentView: 'youxiao-fuyunmu1'
      }
    },
    components: {
      'youxiao-fuyunmu1': fuyunmu1,
      'youxiao-fuyunmu2': fuyunmu2,
      'youxiao-fuyunmu3': fuyunmu3,
      'youxiao-fuyunmu4': fuyunmu4,
      'youxiao-fuyunmu5': fuyunmu5,
      'youxiao-fuyunmu6': fuyunmu6
    },
    methods: {
      toggleTabs: function (func) {
        if (func === 'add') {
          if (this.currentView !== 'youxiao-fuyunmu6') {
            this.currentIndex = this.currentIndex + 1
            this.currentView = 'youxiao-fuyunmu' + this.currentIndex
          }
        } else {
          if (this.currentView !== 'youxiao-fuyunmu1') {
            this.currentIndex = this.currentIndex - 1
            this.currentView = 'youxiao-fuyunmu' + this.currentIndex
          }
        }
      }
    }
  }
</script>

<style scoped>

.fuyunmu > div {
  position: absolute; 
}
.left {
  z-index: 10;
  top: 330px;
  left: 40px;
}
.right {
  z-index: 10;
  top: 330px;
  left: 1210px;
}
.b {
  top: 282px;
  left: 240px;
}
.p {
  top: 268px;
  left: 478px;
}
.m {
  top: 280px;
  left: 675px;
}
.f {
  top: 295px;
  left: 893px;
}
</style>
